<template>
  <view class="page-balance">
    <view class="account-balance">
        <text @click="showDetails">账户明细</text>
    </view>
    <view class="recharge-button">
      <button @click="recharge">充值</button>
	   <uni-popup ref="bottomPopup" type="bottom">
	        <view class="popup-content">
				     <button class="button popup-info"style="background-color: #F6F4F5; color: black;" ><text class="button-text info-text">请选择你要充值的金额</text></button>
					 <button type="default" style="background-color: #F6F4F5; color: black;" @click="selectAmount(100)">100元</button>
	                  <button style="background-color: #F6F4F5; color: black;" @click="selectAmount(200)">200元</button>
	                  <button style="background-color: #F6F4F5; color: black;" @click="selectAmount(500)">500元</button>
	        </view>
	   </uni-popup>
    </view>
	
    <view class="notice">
      <text>由于微信方面调整,从2022年4月15号起,每笔充值将收取1.000%的手续费,该费用由微信收取而并非本公司收取</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      balance: '0',
	  id:0,
	  amount:0,
    };
  },
  onLoad(options){
	  this.id = options.status;
	  console.log(options);
  },
  methods: {
    showDetails() {
      // 显示账户明细的逻辑
      uni.showToast({
        title: '显示账户明细',
        icon: 'none'
      });
    },
    recharge() {
      // 充值逻辑
      uni.showToast({
        title:'请选择您要充值的余额',
        icon: 'none'
      });
	  this.$refs.bottomPopup.open();
    },
	selectAmount(amount){
		try {
				const response = new Promise((resolve, reject) => {
					uni.request({
						url: 'http://zhaoyang.nat300.top/app/amount',
						method: 'POST',
						data: {
						    id:this.id,
							amount:amount,		
						},
						header: {
							'content-type': 'application/json' // 默认值
						},
						success:(resolve)=>{
							console.log(resolve.data);
							 uni.navigateBack({
							    delta: 1  // 返回上一页
							  });
						} ,
						fail: reject
					});
					
				});
		
				console.log('POST 请求成功:', response);
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				});
			} catch (error) {
				console.error('POST 请求失败:', error);
				uni.showToast({
					title: '提交失败，请重试',
					icon: 'none'
				});
			}
			this.$refs.bottomPopup.close();
	}
  },
};
</script>

<style scoped>
  .page-balance {
    padding: 20px;
  }
  .balance-section {
    padding: 20rpx;
	background-color: #F6F4F5;
	height: 200rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	}	
  .account-balance {
    margin: 20rpx;
  }
  .balance-info {
    display: flex;
    justify-content: space-between;
  }
  .balance-info image {
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }
  .recharge-button button {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
  }
  .notice {
    margin-top: 20px;
    font-size: 14px;
    color: #6c757d;
  }
</style>